<template>
	<!--表格单选-->
	<el-row class="dataDic">
  		<el-col :span="24">
  			<!--查询过滤条件-->
  			<el-form :inline="true" :model="conditionForm" ref="conditionForm" label-width="82px">
  				<el-form-item label="系统名称">				
					<el-input v-model="conditionForm.serverSysName"></el-input>
				</el-form-item>
				<el-button type="primary" size="small" @click="queryTableData">查询</el-button>
			</el-form>
  		</el-col>
  		<el-col :span="24">
  			<!--表格数据展示-->
  			<div>
	  			<el-button type="primary" size="small" icon="plus" v-on:click="addFn">新增</el-button>
	  			<el-button type="primary" size="small" icon="edit" v-on:click="editFn">修改</el-button>
	  			<el-button type="primary" size="small" icon="delete" v-on:click="deleteFn">删除</el-button>
  			</div>
  			<div class="data-list">
				<el-table :data="tableDatalist" border style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
					<el-table-column width="55" >
						<template slot-scope="scope">
							<label class="radio">
								<input type="radio" value="2" name="radio" :data-index="scope.row.index">
								<span class="dot"></span>
							</label>
						</template>
					</el-table-column>
					<el-table-column v-for="column in tableColumn" :prop="column.columnName" :label="column.columnLabel" v-if="column.isColumnShow"></el-table-column>
				</el-table>
				<el-pagination
			      @size-change="pageSizeChange"
			      @current-change="handleCurrentChangePage"
			      :current-page="pagination.currentPage"
			      :page-sizes="[10,20, 50, 100, 200]"
			      :page-size="pagination.pageSize"
			      layout="->,prev, pager, next, jumper, sizes,total"
			      :total="pagination.totalSize">
			    </el-pagination>
			</div>
  		</el-col>
  		<el-col :span="24">
  			<!--新增和修改 dialog-->
			<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
				<el-form :model="configform" ref="configform" :rules="rules" label-width="100px">
					<el-form-item v-for="(columnValue, columnKey) in configform" :label="transAttrName(columnKey)">
						<el-input style="width:200px" v-model="configform[columnKey]" auto-complete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</el-col>
	</el-row>
</template>
<script>
	import {
		Message
	} from 'element-ui';
	import soDic from '../../components/soDic.vue'
	export default {
		components:{soDic},
		data() {
			return {
				tableDatalist:[
					{
						serverSysName:'SHIVA_OMS_CORE',
						serverIp:'10.118.1.5',
						instanceNum:'1',
						modifyUser:'01367604',
						modifyTime:'2018-10-12 17:50:11'
					},
					{
						serverSysName:'SHIVA_OMS_CORE2',
						serverIp:'10.118.1.6',
						instanceNum:'1',
						modifyUser:'01367604',
						modifyTime:'2018-10-12 17:50:11'
					}
				],
				conditionForm: { //查询过滤的条件
					serverSysName:''
				},
				tableColumn:[ 
					{
						columnName:'id', //主键字段，修改和删除的依赖列
						columnLabel:'ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'serverSysName',
						columnLabel:'系统名称',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'serverIp',
						columnLabel:'IP地址',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'instanceNum',
						columnLabel:'实例数',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'modifyUser',
						columnLabel:'修改人',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:false,
					},
					{
						columnName:'modifyTime',
						columnLabel:'修改时间',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:false,
					}
				],
				urlPaths:{
					queryList:'tsCfgUnitTest/selectByExample',
					delByKey:'tsCfgUnitTest/deleteByPrimaryKey',
					insert:'tsCfgUnitTest/insert',
					updateByKey:'tsCfgUnitTest/updateByPrimaryKeySelective',
				},
				configform: {},
				createTm:'',
				index: '',
				dialogVisible: false,
				dialogTitle:'新增',
				rules: {
				},
				currentRow: null,
				pagination:{
					totalSize:0,
					pageSize: 20,
					currentPage:1,
				},
			}
		}, 
		computed:{
			/**
			 * @author：01367604
			 * @function: 转换表单中显示的属性名称，将英文列名转换成中文描述
			 * @pramas: 
			 */
			transAttrName(value){
				return function (value){
//					console.log(value);
					var colElem = this.tableColumn.find((element) => (element.columnName == value))
					return colElem.columnLabel;
				}
			}
		},
		beforeCreate(){
    	},
    	mounted() {
    		this.initData();
		},
		methods: {
			initData(){
//  			this.queryTableData();
			},
			queryTableData(){
				/*查询接口*/
				this.$httpExt().post(this.urlPaths.queryList, {
		  			serverSysName:this.serverSysName,	
					pageSize:this.pagination.pageSize,
					currentPage:this.pagination.currentPage
				}).then((response) => {
					var rows= response.result.list;
					for(let [index, item] of rows.entries()){
						item.index = index
					}
					this.tableDatalist = rows;
					this.pagination.totalSize = response.result.totalSize;
//					this.pagination.totalSize = this.tableDatalist.length;
				},(response) => {
					for(let [index, item] of this.tableDatalist.entries()){
						item.index = index
					}
					Message({
						message: '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
			},
			/*翻页*/
			handleCurrentChangePage(val){
				this.pagination.currentPage = val;
				this.queryTableData();
			},
			/*切换显示条数*/
			pageSizeChange(val){
				this.pagination.pageSize = val;
				this.queryTableData();
			},
			/*选择一条数据*/
			handleCurrentChange(val) {
				if(!val) {
					return
				}
				this.currentRow = val;
				this.index = val.index+''
				console.log('this.currentRow ',this.currentRow);
				console.log('this.index ',this.index);
			},
			/*新增*/
			addFn(){
				this.dialogVisible = true;
				this.dialogTitle='新增';
				/*if(this.$refs['configform']!=undefined) {
					this.$refs['configform'].resetFields();
				}*/
				this.setFormData();
			},
			/*编辑*/
			editFn(){
				if(this.index) {
					this.dialogVisible = true;
					this.dialogTitle='编辑';
					this.setFormData();
				}else{
					Message({
						message: '请选择一条进行操作！',
						type: 'warning'
					});
				}
			},
			setFormData(){
				var form ={};
				for(let col of this.tableColumn){
					if (col.isModifyDialogEnabled){
						if (this.dialogTitle=='新增'){
							form[col.columnName] = '';
						} else {
							form[col.columnName] = this.currentRow[col.columnName];
						}
					}
				}
				this.configform = form;
			},
			/*删除*/
			deleteFn(){
				if(this.index) {
					this.$confirm('你确定要删除吗？', '删除提示', {
			          	confirmButtonText: '确定',
			          	cancelButtonText: '取消',
			          	type: 'warning'
			        }).then(() => {
			        	//调删除接口
			        	this.$httpExt().post(this.urlPaths.delByKey, {
							id:this.currentRow.id
						}).then((response) => {
							Message({
								message: response.msg,
								type: 'success'
							});
							this.queryTableData();
						},(response) => {
							Message({
								message: '服务器请求失败，请重试！',
								type: 'warning'
							});
						});
			        });
				}else{
					Message({
						message: '请选择一条进行操作！',
						type: 'warning'
					});
				}
			},
			/*提交*/
			saveSubmit(){				
//				this.$refs.configform.validate((valid) => {
//					if(valid) {
//						
//						}
//					}
//				});
				var that = this;
				if(this.dialogTitle == '新增') {
//							that.configform.id = '';
					var url = this.urlPaths.insert;
				} else {
					var url = this.urlPaths.updateByKey;
				}
				console.log(url);
//				var ele = document.getElementById("updateBtn");
//				if(this.$checkPrevent(ele)) {
//							this.$httpExt().post(url,that.configform).then((response) => {
//								if(response.succ == 'ok') {
//									that.dialogVisible = false;
//									
//									if(this.dialogTitle == '新增') {
//										var currentPage = 1;
//									} else {
//										currentPage = that.pagination.currentPage;
//									}
//									that.queryTableData();
//								}
//							}, (data) => {
//								Message({
//									message: data.msg ? data.msg : '服务器请求失败，请重试！',
//									type: 'warning'
//								});
//							});
//				}
				console.log(that.configform);
				this.tableDatalist.push(that.configform);
			},
			handleReset() {
				this.newlyFormVisible = false
			},
	    }
	}
</script>
<style>
.fl{
	float: left;
}
.dataDic a{
	color: #20a0ff;
	text-decoration: none;
}
.dic-breadcrumb {
	margin-top: 15px;
	height: 20px;
	line-height: 20px;
	font-size: 16px;
}
.dic-pagination {
	float: right;
	margin-top: 15px;
}
</style>